<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>身高记录</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航 -->
        <div class="flex items-center justify-between mb-6">
            <button class="icon-btn">
                <i class="fas fa-chevron-left"></i>
            </button>
            <h1 class="text-xl font-bold text-gray-900">身高记录</h1>
            <button class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md hover:bg-blue-700 transition-colors">
                <i class="fas fa-plus"></i>
            </button>
        </div>
        
        <!-- 当前身高信息 -->
        <div class="card bg-gradient-to-r from-blue-50 to-blue-100 border-none mb-6 fade-in">
            <div class="flex items-center justify-between">
                <div>
                    <div class="flex items-center">
                        <i class="fas fa-ruler-vertical text-blue-600 mr-2"></i>
                        <span class="text-blue-800 font-medium">当前身高</span>
                    </div>
                    <div class="mt-1">
                        <span class="text-3xl font-bold text-blue-900">75.5</span>
                        <span class="text-lg font-medium text-blue-700">cm</span>
                    </div>
                    <div class="text-xs text-blue-600 mt-1">2024年5月25日测量</div>
                </div>
                <div class="bg-white/60 rounded-lg p-3 text-center">
                    <div class="text-xl font-bold text-blue-700">+1.5</div>
                    <div class="text-xs text-blue-600">cm 增长</div>
                    <div class="text-xs text-blue-600 mt-1">较上次</div>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-t border-blue-200/30">
                <div class="flex justify-between items-center">
                    <div class="text-xs text-blue-800">
                        <span class="font-semibold">第50百分位</span> 
                        <span class="text-blue-600 ml-1">(平均水平)</span>
                    </div>
                    <div class="text-xs text-blue-800">
                        <span class="font-semibold">年增长:</span> 
                        <span class="text-blue-600">12.5 cm</span>
                    </div>
                </div>
                
                <!-- 百分位进度条 -->
                <div class="progress-bar mt-2">
                    <div class="progress-fill bg-blue-600" style="width: 50%"></div>
                </div>
                
                <div class="mt-2 flex justify-between text-xs text-blue-600">
                    <span>0 - 偏低</span>
                    <span>50 - 平均</span>
                    <span>100 - 偏高</span>
                </div>
            </div>
        </div>
        
        <!-- 生长曲线 -->
        <div class="fade-in" style="animation-delay: 0.1s">
            <div class="flex justify-between items-center mb-4">
                <h2 class="section-header mb-0">生长曲线</h2>
                <div class="flex space-x-2">
                    <select class="text-xs bg-gray-100 border border-gray-200 rounded-lg px-2 py-1">
                        <option>0-2岁</option>
                        <option>2-5岁</option>
                        <option>5-10岁</option>
                    </select>
                    <button class="icon-btn text-sm">
                        <i class="fas fa-share-alt"></i>
                    </button>
                </div>
            </div>
            
            <div class="card p-4">
                <div class="flex justify-between items-center mb-3">
                    <div class="text-sm font-medium text-gray-900">男孩 0-2岁 身高曲线</div>
                    <div class="text-xs text-gray-500">世卫组织标准</div>
                </div>
                
                <div class="chart-container" style="height: 280px;">
                    <canvas id="heightChart"></canvas>
                </div>
                
                <div class="mt-3 flex flex-wrap justify-between text-xs">
                    <div class="flex items-center mb-1">
                        <span class="inline-block w-3 h-3 bg-blue-500 rounded-full mr-1"></span>
                        <span class="text-gray-900">实际身高</span>
                    </div>
                    <div class="flex items-center mb-1">
                        <span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-1"></span>
                        <span class="text-gray-900">P50 (平均值)</span>
                    </div>
                    <div class="flex items-center mb-1">
                        <span class="inline-block w-3 h-3 bg-yellow-500 rounded-full mr-1"></span>
                        <span class="text-gray-900">P3 (偏低)</span>
                    </div>
                    <div class="flex items-center mb-1">
                        <span class="inline-block w-3 h-3 bg-red-500 rounded-full mr-1"></span>
                        <span class="text-gray-900">P97 (偏高)</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 标准曲线解释 -->
        <div class="mt-5 fade-in" style="animation-delay: 0.2s">
            <div class="card border border-blue-100 bg-blue-50">
                <div class="flex items-start">
                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 mr-3 mt-1">
                        <i class="fas fa-info"></i>
                    </div>
                    <div>
                        <h3 class="font-medium text-blue-900 mb-2">世卫组织生长标准说明</h3>
                        <p class="text-sm text-blue-800">身高曲线显示您的宝宝在世卫组织标准中的位置。第50百分位线表示有50%的同龄儿童身高低于这一数值。</p>
                        <button class="mt-3 text-xs bg-white text-blue-700 px-3 py-1.5 rounded-full shadow-sm font-medium hover:bg-blue-100 transition-colors">
                            了解更多
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 历史记录 -->
        <div class="mt-6 fade-in" style="animation-delay: 0.3s">
            <div class="flex justify-between items-center mb-4">
                <h2 class="section-header mb-0">历史记录</h2>
                <div class="flex space-x-2">
                    <button class="icon-btn text-sm">
                        <i class="fas fa-sort"></i>
                    </button>
                    <button class="icon-btn text-sm">
                        <i class="fas fa-filter"></i>
                    </button>
                </div>
            </div>
            
            <div class="card overflow-hidden mb-5">
                <div class="list-item hover:bg-blue-50 transition-colors">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                            <i class="fas fa-ruler-vertical"></i>
                        </div>
                        <div>
                            <div class="list-label">2024年5月25日</div>
                            <div class="text-xs text-gray-500">11个月10天</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-blue-600 font-semibold">75.5 cm</div>
                        <div class="flex items-center justify-end mt-1">
                            <i class="fas fa-arrow-up text-green-600 text-xs mr-1"></i>
                            <span class="text-green-600 text-xs">+1.5 cm</span>
                        </div>
                    </div>
                </div>
                
                <div class="list-item hover:bg-blue-50 transition-colors">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                            <i class="fas fa-ruler-vertical"></i>
                        </div>
                        <div>
                            <div class="list-label">2024年4月18日</div>
                            <div class="text-xs text-gray-500">10个月3天</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-blue-600 font-semibold">74.0 cm</div>
                        <div class="flex items-center justify-end mt-1">
                            <i class="fas fa-arrow-up text-green-600 text-xs mr-1"></i>
                            <span class="text-green-600 text-xs">+1.5 cm</span>
                        </div>
                    </div>
                </div>
                
                <div class="list-item hover:bg-blue-50 transition-colors">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                            <i class="fas fa-ruler-vertical"></i>
                        </div>
                        <div>
                            <div class="list-label">2024年3月15日</div>
                            <div class="text-xs text-gray-500">9个月</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-blue-600 font-semibold">72.5 cm</div>
                        <div class="flex items-center justify-end mt-1">
                            <i class="fas fa-arrow-up text-green-600 text-xs mr-1"></i>
                            <span class="text-green-600 text-xs">+2.5 cm</span>
                        </div>
                    </div>
                </div>
                
                <div class="list-item hover:bg-blue-50 transition-colors">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                            <i class="fas fa-ruler-vertical"></i>
                        </div>
                        <div>
                            <div class="list-label">2024年2月10日</div>
                            <div class="text-xs text-gray-500">7个月26天</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-blue-600 font-semibold">70.0 cm</div>
                        <div class="flex items-center justify-end mt-1">
                            <i class="fas fa-arrow-up text-green-600 text-xs mr-1"></i>
                            <span class="text-green-600 text-xs">+2.5 cm</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="flex justify-center mt-4">
                <button class="text-sm text-blue-600 font-medium flex items-center">
                    查看更多记录 <i class="fas fa-chevron-down ml-1"></i>
                </button>
            </div>
        </div>
    </div>
    
    <script>
        // 初始化身高曲线图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('heightChart').getContext('2d');
            
            // 男孩0-12个月WHO标准身高数据 (简化版)
            const months = [0, 2, 4, 6, 8, 10, 12];
            const p3Data = [46.8, 54.4, 60.0, 64.2, 67.6, 70.5, 72.9]; // 第3百分位
            const p50Data = [49.9, 58.4, 64.4, 68.9, 72.3, 75.0, 77.5]; // 第50百分位（中位数）
            const p97Data = [53.0, 62.2, 68.6, 73.4, 77.1, 80.0, 82.6]; // 第97百分位
            
            // 宝宝实际数据
            const babyData = [50.0, null, null, 65.0, 67.5, 70.0, 75.5];
            
            const heightChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: months.map(m => `${m}个月`),
                    datasets: [
                        {
                            label: '宝宝身高',
                            data: babyData,
                            borderColor: 'rgba(59, 130, 246, 1)',
                            backgroundColor: 'rgba(59, 130, 246, 0.5)',
                            borderWidth: 3,
                            pointRadius: 5,
                            pointHoverRadius: 8,
                            tension: 0.4,
                            pointBackgroundColor: 'white',
                            pointBorderColor: 'rgba(59, 130, 246, 1)',
                            pointBorderWidth: 2
                        },
                        {
                            label: 'P50 (平均值)',
                            data: p50Data,
                            borderColor: 'rgba(34, 197, 94, 1)',
                            borderDash: [5, 5],
                            backgroundColor: 'transparent',
                            borderWidth: 2,
                            pointRadius: 0,
                            tension: 0.4
                        },
                        {
                            label: 'P3 (偏低)',
                            data: p3Data,
                            borderColor: 'rgba(234, 179, 8, 1)',
                            borderDash: [2, 2],
                            backgroundColor: 'transparent',
                            borderWidth: 2,
                            pointRadius: 0,
                            tension: 0.4
                        },
                        {
                            label: 'P97 (偏高)',
                            data: p97Data,
                            borderColor: 'rgba(239, 68, 68, 1)',
                            borderDash: [2, 2],
                            backgroundColor: 'transparent',
                            borderWidth: 2,
                            pointRadius: 0,
                            tension: 0.4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            titleColor: '#111827',
                            bodyColor: '#4b5563',
                            borderColor: 'rgba(0, 0, 0, 0.05)',
                            borderWidth: 1,
                            displayColors: false,
                            padding: 10,
                            cornerRadius: 10,
                            callbacks: {
                                title: function(tooltipItems) {
                                    return tooltipItems[0].label;
                                },
                                label: function(context) {
                                    let value = context.raw;
                                    if (value === null) return '';
                                    return `${context.dataset.label}: ${value} cm`;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                font: {
                                    size: 10
                                }
                            }
                        },
                        y: {
                            beginAtZero: false,
                            min: 45,
                            max: 85,
                            title: {
                                display: true,
                                text: '身高 (cm)',
                                font: {
                                    size: 11,
                                    weight: 'normal'
                                }
                            },
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                font: {
                                    size: 10
                                }
                            }
                        }
                    },
                    interaction: {
                        mode: 'index',
                        intersect: false
                    }
                }
            });
        });
    </script>
</body>
</html> 